<template>
    <div class="deal-list">
        <header>影院超值套餐</header>
        <section>
            <div class="deal-item" v-for="item in dealList" :key="item.dealId">
                <div class="deal-left">
                    <img :src="item.imageUrl" />
                </div>
                <div class="deal-right">
                    <div class="deal-info">
                        <div class="deal-title">
                            <span class="deal-tag">{{item.titleTag}}</span>
                            {{item.title}}
                        </div>
                        <div class="deal-price">
                            <span class="rmb">¥</span>
                            {{item.price}}
                        </div>
                    </div>
                    <div class="buy-info">
                        <div class="buy-num">{{item.curNumberDesc}}</div> 
                        <div class="buy-btn">去购买</div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
export default {
    props:{
        dealList:[Object,Array]
    }
}
</script>

<style lang="less" scoped>
.deal-list{
    margin-top: 10px;
    padding: 0 15px;
    font-size: 15px;
    background-color: #fff;
    header{
        padding: 12px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #666;
    }
    section{
        .deal-item{
            width: 100%;
            padding: 15px 0;
            margin-bottom: -1px;
            overflow-y: hidden;
            -webkit-transition: height .2s linear;
            transition: height .2s linear;
            margin-right: -15px;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            // -webkit-box-pack: justify;
            // -webkit-justify-content: space-between;
            // justify-content: space-between;
            // -webkit-box-align: center;
            // -webkit-align-items: center;
            // align-items: center;
            background-size: 1px 1px;
            position: relative;
            height: 92px;
            .deal-left{
                width: 92px;
                height: 92px;
                margin-right: 15px;
                background: #f0f0f0;
                position: relative;
                &>img{
                    width: 100%;
                    height: 100%;
                }
            }
            .deal-right{
                display: flex;
                flex: 1 1 auto;
                justify-content: space-between;
                .deal-info{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .deal-title{
                        font-size: 14px;
                        line-height: 18px;
                        color: #333;
                        display: -webkit-box;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        .deal-tag{
                            display: inline-block;
                            vertical-align: top;
                            margin-top: 1px;
                            margin-right: 7px;
                            padding: 0 4px;
                            font-size: 10px;
                            line-height: 15px;
                            height: 15px;
                            background: #f90;
                            border-radius: 2px;
                            color: #fff;
                        }
                    }
                    .deal-price{
                        display: inline-block;
                        font-size: 17px;
                        color: #f03d37;
                        .rmb{
                            font-size: 14px;
                        }
                    }
                }
                .buy-info{
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    align-items: flex-end;
                    .buy-num{
                        display: inline-block;
                        margin-bottom: 7px;
                        line-height: 16px;
                        height: 16px;
                        font-size: 12px;
                        color: #999;
                    }
                    .buy-btn{
                        display: inline-block;
                        padding: 0 8px;
                        height: 27px;
                        line-height: 27px;
                        font-size: 12px;
                        border-radius: 3px;
                        color: #fff;
                        background-color: #f03d37;
                    }
                }
            }
        }
    }
}
</style>